<!--
 * @Author: your name
 * @Date: 2020-09-23 09:18:55
 * @LastEditTime: 2021-02-03 16:39:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \longh_web\src\views\index\Enterprise\index.vue
-->
<template>
  <div class="Enterprise">
    <div class="banner">
      <div class="wh-1200 banner_top flex">
        <div>
          <p class="title">供需精准对接服务</p>
          <p class="ent_title">已入驻企业</p>
        </div>
        <div class="count">
          <countTo :startVal="startVal" :endVal="total" :duration="2000" separator=''>
          </countTo>
        </div>
      </div>

    </div>
    <!-- main主要部分开始 -->
    <div class="main w">
      <!-- 标题模块 -->
      <div class="main-title mt-40">
        <img src="./image/tips.png" alt />
        <span>企业列表</span>
      </div>

      <!-- 搜索模块 -->
      <div class="main-search">
        <a-form-model :label-col="{ span: 2 }">
          <a-form-model-item label="关键字：">
            <a-input placeholder="请输入企业名称" v-model="searchform.keyword" />
            <a-button class="ant-btn1" @click="search">搜索</a-button>
            <span @click="show = !show" v-show="!show" class="show-btn">
              高级搜索
              <a-icon type="caret-right" />
            </span>
            <span @click="show = !show" v-show="show" class="show-btn" style="color: #188af1;">
              高级搜索
              <a-icon type="caret-down" />
            </span>
          </a-form-model-item>
        </a-form-model>

        <div v-show="show">
          <div>
            <a-form-model class="mt-10" :label-col="{ span: 2 }" :wrapper-col="{ span: 17 }" :rules="rules"
              :model="formData" ref="searchForm">
              <a-form-model-item label="行业类别：">
                <a-select placeholder="请选择" v-model="searchform.industry" style="width: 260px" class="mr-32">
                  <a-select-option value="">请选择</a-select-option>
                  <a-select-option v-for="(item) in traditionalCategory" :key="item.dictValue"
                    :value="item.dictValue">{{ item.dictLabel }}</a-select-option>
                </a-select>
                <!-- <a-select placeholder="请选择" v-model="JjhyEJValue" style="width: 260px" class="mr-32">
                                    <a-select-option value="">请选择</a-select-option>
                                    <a-select-option v-for="(item, index) in JjhyEJ" :key="index"
                                        :value="item.jjhyDm">{{ item.jjjy }}</a-select-option>
                                </a-select> -->
              </a-form-model-item>
              <a-form-model-item label="注册资金：" class="reg-cap-cls" prop="minRegCap">
                <a-input suffix="万元" v-model="searchform.registeredCapitalStart"></a-input>
              </a-form-model-item>
              <a-form-model-item label="至" class="reg-cap-cls line" prop="maxRegCap">
                <a-input suffix="万元" v-model="searchform.registeredCapitalEnd"></a-input>
              </a-form-model-item>
              <!-- v-decorator="['minRegCap', {
                  rules: [{ message: '请输入正确的金额数', pattern: /^(0|[1-9]\d*)\.\d+$/ }], validateTrigger: ['change', 'blur']
                }]" -->
            </a-form-model>
          </div>
        </div>
      </div>

      <div class="main-searchResult clearfix">
        <div class="f-left search-left">
          <span v-if="ShowSearchkeywords != ''">

            搜索："
            <span class="search-text1">{{ ShowSearchkeywords }}</span>
            "
          </span>
          共
          <span class="search-text2">{{ total }} </span>条数据
        </div>
        <div class="f-right search-right clearfix">
          <a-button type="dashed" @click="SwitchisAse">
            <div class="f-left search-right-icon">
              <div>
                <a-icon type="caret-up" :class="searchform.isAse == 'asc' ? '' : 'down'" />
              </div>
              <div>
                <a-icon type="caret-down" :class="searchform.isAse == 'asc' ? 'down' : ''" />
              </div>
            </div>
            <div class="f-left remainingTime">关注度</div>
          </a-button>

        </div>
      </div>

      <div class="content-box">
        <div class="gutter-example">
          <a-row>
            <a-col class="gutter-row mb-56" v-for="(item, index) in entBaseInfoList" :key="index">
              <div class="row-box" @click="JumpDetails(item.id)">
                <div class="ent_logo">
                  <img v-if="item.logo" :src="item.logo" alt="">
                  <img v-else class="defult_img" src="@/assets/images/defult_img.png" alt="">
                </div>
                <div class="expire pl-20"></div>
                <div class="content-title">
                  <div class="content-title-text clearfix">
                    <div class="f-left"></div>
                    <div class="f-left row-title">{{ item.name }}
                      <!-- <span class="tags">母婴</span> -->
                      <!-- <span class="tags">制造</span> -->
                    </div>
                  </div>
                </div>
                <div class="row-mainBox">
                  <ul>
                    <li>
                      <span><i class=" iconfont icon-biaoqian address_icon" style="color:#0da9b0"></i></span><span
                        class="">行业：{{
                          item.industry && getTraditionalName(item.industry) }}</span>
                    </li>
                    <li class="mt-8">
                      <span class="disc"></span><i class=" iconfont address_icon icon-dizhi"></i>企业地址：
                      <span>{{ item.address }}</span>
                    </li>
                    <li class="flex mt-8">
                      <div>
                        <span class="disc"></span><i class=" iconfont momey_icon icon-meiyuanqianbao"></i>注册资金：
                        <span>{{ item.registeredCapital ? `${item.registeredCapital} 万元` : ''
                          }}</span>
                      </div>
                      <div class=" flex-1 ml-48">
                        <span class="disc"></span><i class=" iconfont data_cion icon-riqi1"></i>成立日期：
                        <span>{{ item.incorporationDate }}</span>
                      </div>
                    </li>
                  </ul>
                </div>
                <div class="clearfix row-footer">
                  <div class="f-left row-footer-text">
                    <p> {{ item.companyProfile }}</p>
                  </div>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
      <NoData v-if="entBaseInfoList.length <= 0" :Keywords="ShowSearchkeywords"></NoData>
      <div v-if="entBaseInfoList.length > 0" style="text-align:center" class="mb-100">
        <a-pagination :show-total="total => `共有 ${total} 条数据`" show-quick-jumper :default-current="searchform.current"
          @showSizeChange="showSizeChanger" show-size-changer :defaultPageSize="10"
          :pageSizeOptions="['10', '20', '30', '40']" :total="total" @change="onChange" />
      </div>
    </div>
    <!-- main主要部分结束 -->
  </div>
</template>

<script>
import countTo from "vue-count-to";
import { getentBaseInfoList, getJjhyList } from "@/apis/EntBase";
import { homeTjData } from "@/apis/Home";
import NoData from "@/components/Nodata";
import { getClientUseCompanyList } from "@/apis/com/company";
import { getDicts } from '@/apis/system';
export default {
  data () {
    let regCheck = (rule, value, callback) => {
      let reg = new RegExp(/^(0|[1-9]\d*)$/)
      if (value === '') {
        callback()
      } else if (!reg.test(value)) {
        callback(new Error('请输入正确的金额'))
      } else {
        callback()
      }
    }
    return {
      TjData: {},
      show: false,
      startVal: 0,
      endVal: 25600,
      AllTotal: 0,
      FirstCount: 0,
      ShowSearchkeywords: "", //显示的搜索关键字
      ShowJjhyYJValue: "", //显示的搜索关键字
      // JjhyYJValue: "", //一级Value
      // JjhyEJValue: "", //二级value
      // JjhyZL: [], //总的国民数据
      // JjhyYJ: [], //一级
      // JjhyEJ: [], //二级
      formData: {
        minRegCap: '',
        maxRegCap: ''
      },

      entBaseInfoList: [],
      total: 0,
      searchform: {
        current: 1,
        industry: "",
        isAse: 'asc',
        keyword: "",
        registeredCapitalStart: '',
        registeredCapitalEnd: '',
        size: 10
      },
      rules: {
        registeredCapitalStart: [{ validator: regCheck, trigger: ['change', 'blur'] }],
        registeredCapitalEnd: [{ validator: regCheck, trigger: ['change', 'blur'] }]
      },
      traditionalCategory: [],
    }
  },
  components: {
    countTo,
    NoData,
  },
  created () {
    this.getTraditionalCategory()
    // this.getJjhyList();
    // this.GethomeTjData();
    let _keywords = this.$route.query.keywords;
    if (_keywords) {
      this.searchform.keyword = _keywords;
      this.ShowSearchkeywords = _keywords;
      this.getentBaseInfoListData();
    } else {
      this.getentBaseInfoListData();
    }
  },
  watch: {
    $route (to, from) {
      console.log(to);//到哪去
      this.ShowSearchkeywords = to.query.keywords
      this.searchform.keyword = to.query.keywords
      this.search(this.searchform.keyword)

    }
  },
  methods: {
    /**
     * 获取行业类别
     */
    async getTraditionalCategory () {
      const { data } = await getDicts("traditional_categories");
      console.log('获取行业类别', data);
      this.traditionalCategory = data
    },

    getTraditionalName (dictValue) {
      return this.traditionalCategory.find(item => item.dictValue == dictValue).dictLabel
    },



    // 获取首页统计
    GethomeTjData () {
      homeTjData()
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.TjData = res.data;
          }
        })
        .catch((error) => { });
    },
    SwitchisAse () {
      this.searchform.isAse = this.searchform.isAse === 'asc' ? 'desc' : 'asc';
      this.getentBaseInfoListData();
    },
    // 获取国民竞技行业字段
    getJjhyList () {
      getJjhyList()
        .then((res) => {
          console.log("获取国民竞技行业字段");
          if (res.code == 200) {
            this.JjhyZL = res.data;
            res.data.forEach((element) => {
              if (element.fljb == "0") {
                this.JjhyYJ.push(element);
              }
            });
          }
        })
        .catch((error) => { });
    },
    // 获取二级
    GetEjList () {
      console.log(this.JjhyYJValue);
      let _arr = [];
      this.JjhyEJValue = "";
      this.JjhyZL.forEach((element) => {
        if (element.sjlbDm == this.JjhyYJValue) {
          _arr.push(element);
        }
      });
      this.JjhyEJ = _arr;
      console.log(this.JjhyEJ);
    },
    // 搜索
    search () {
      this.$refs['searchForm'].validate(valid => {
        if (valid) {
          if (this.searchform.keyword != "") {
            this.ShowSearchkeywords = this.searchform.keyword;
          } else {
            this.ShowSearchkeywords = "";
          }
          // console.log(this.JjhyYJValue);
          // console.log(this.JjhyEJValue);
          // if (this.JjhyEJValue == "" && this.JjhyYJValue == "") {
          //     this.searchform.industry = "";
          // }
          // if (this.JjhyEJValue == "" && this.JjhyYJValue != "") {
          //     this.searchform.industry = this.JjhyYJValue;
          // }

          // if (this.JjhyEJValue != "") {
          //     this.searchform.industry = this.JjhyEJValue;
          // }
          this.entBaseInfoList = [];
          this.total = 0;
          this.searchform.size = 10;
          // this.searchform.regCapStart = this.formData.minRegCap
          // this.searchform.regCapEnd = this.formData.maxRegCap
          this.onChange(1)
        }
      })
    },
    onChange (page, pageSize) {
      this.searchform.current = page;
      this.getentBaseInfoListData();
    },
    showSizeChanger (current, size) {
      this.searchform.size = size;
      this.searchform.current = current;
      this.getentBaseInfoListData();
    },
    // 跳转到企业详情
    JumpDetails (id) {
      this.$router.push("/entdetails?id=" + id);
    },
    getentBaseInfoListData () {
      this.$setLoading(true);
      let param = {
        pageNum: this.searchform.current,
        industry: this.searchform.industry,
        isAse: this.searchform.isAse,
        name: this.ShowSearchkeywords,
        registeredCapitalStart: this.searchform.registeredCapitalStart,
        registeredCapitalEnd: this.searchform.registeredCapitalEnd,
        pageSize: this.searchform.size,
        approvalSt: 1,
        type: 0
      }
      console.log('param', param);


      getClientUseCompanyList(param)
        .then((res) => {
          console.log("企业列表");
          console.log(res);
          if (res.code == 200) {
            this.FirstCount = this.FirstCount + 1;
            if (this.FirstCount == 1) {
              this.AllTotal = res.total;
            }
            this.entBaseInfoList = res.rows;
            this.total = res.total;
          }
          this.$setLoading(false);
        })
        .catch((error) => { });
    },
  },
};
</script>

<style lang="less" scoped>
.w {
  width: 1200px;
  margin: 0 auto;
}

.Enterprise {
  .banner {
    width: 100%;
    height: 200px;
    background-image: url(./image/Bannrt_entindex.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center top;

    .banner_top {
      font-size: 28px;
      line-height: 48px;
      letter-spacing: 0px;
      color: #072947;

      .title {
        padding-top: 56px;
      }

      .ent_title {
        padding-left: 54px;
        position: relative;

        &::before {
          content: "";
          width: 315px;
          height: 6px;
          background-color: #23d7aa;
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }

      .count {
        font-size: 48px;
        letter-spacing: 0px;
        color: #072947;
        padding-top: 100px;
        font-weight: bold;
        padding-left: 20px;
      }
    }
  }

  .main {
    .main-title {
      img {
        width: 40px;
        height: 40px;
        margin-right: 16px;
        vertical-align: middle;
        margin-top: -10px;
      }

      span {
        font-family: Microsoft YaHei;
        font-size: @font26;
        line-height: @font26;
        font-weight: 700;
        color: @text-color-303;
      }
    }

    .main-search {
      margin-top: 24px;
      margin-bottom: 24px;

      ::v-deep .ant-col-2 {
        width: auto !important;
      }

      &:nth-child(1) {
        font-family: Microsoft YaHei;
        font-size: @font26;
        font-weight: normal;
        line-height: 19px;
        color: @text-color-606;
        margin-right: 8px;
      }

      .ant-input {
        width: 500px;
        height: 40px;
      }

      .ant-btn1 {
        margin-left: 12px;
        margin-right: 40px;
        width: 100px;
        height: 40px;
        background-color: #2a51bc;
        box-shadow: 0px 10px 20px 0px rgba(7, 41, 71, 0.16);
        border-radius: 4px;
        color: #fff;
      }

      .show-btn {
        cursor: pointer;

        &:hover {
          color: #188af1;
        }
      }

      &:nth-child(4) {
        font-family: Microsoft YaHei;
        font-size: @font26;
        font-weight: normal;
        line-height: 21px;
        color: @text-color-606;
      }

      .reg-cap-cls {
        display: inline-block;
      }

      /deep/ .reg-cap-cls.line {
        .ant-form-item-label {
          label::after {
            content: "";
          }
        }

        .ant-form-item-control-wrapper {
          width: 80%;
        }
      }
    }

    .show-box {
      padding: 16px 20px;
      border-radius: 4px;
      border: solid 1px #e4e7ed;
      margin-bottom: 32px;
    }

    .main-searchResult {
      height: 70px;
      line-height: 70px;

      background-color: #fff;
      box-shadow: 0px 3px 10px 0px rgba(24, 138, 241, 0.16);
      border-radius: 4px;
      margin-bottom: 60px;

      .search-left {
        margin-left: 26px;
        font-size: @font16;

        .search-text1 {
          color: #2a51bc;
        }

        .search-text2 {
          color: #e9284f;
          font-weight: 700;
        }
      }

      .search-right {
        margin-right: 24px;

        .ant-btn {
          text-align: center;
          margin-left: 16px;
          // width: 120px;
          height: 40px;
          line-height: 1;
          border: solid 1px #e9284f;
          color: #ffffff;
          font-size: @font16;
          background-color: #e9284f;

          &:hover {
            background-color: #e9284f;
            color: #fff;
          }
        }

        .down {
          opacity: 0.5;
        }

        .remainingTime {
          padding-left: 5px;
          line-height: 32px;
        }

        .search-right-icon {
          div {
            width: 14px;
            height: 9px;
          }

          padding-top: 3px;
        }
      }
    }

    .content-box {
      .row-box {
        padding: 28px 32px;
        border: solid 1px #e4e7ed;
        position: relative;
        background-color: #ffffff;
        margin-bottom: 24px;
        cursor: pointer;

        .ent_logo {
          width: 213px;
          height: 139px;
          display: flex;
          overflow: hidden;
          justify-content: center;
          align-items: center;
          background-color: #ffffff;
          box-shadow: 6px 6px 20px 0px rgba(24, 138, 241, 0.16);
          border-radius: 4px;
          position: absolute;
          right: 24px;
          top: -30px;

          img {
            width: auto;
            max-height: 120px;
            object-fit: cover;
          }
        }

        &:hover {
          .row-title {
            color: #2a51bc;
          }
        }

        .expire {
          text-align: center;
          position: absolute;
          top: -1px;
          left: 0;
          font-size: @font16;
          color: #fff;
          border-bottom-right-radius: 80%;
          width: 35px;
          height: 42px;
          background-image: url("./image/left_bg.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .content-title {
          font-size: 26px;

          .content-title-text {
            .tags {
              display: inline-block;
              height: 24px;
              line-height: 24px;
              background-color: #ffffff;
              border: solid 1px #0da9b0;
              font-size: 14px;
              padding: 0px 10px;
              border-radius: 10px;
              margin-right: 10px;

              &:nth-child(1) {
                border: solid 1px #0da9b0;
                color: #0da9b0;
              }

              &:nth-child(2) {
                border: solid 1px #188af1;
                color: #188af1;
              }
            }
          }
        }

        .row-mainBox {
          padding: 6px 0;

          .address_icon {
            color: #2a51bc;
            margin-right: 4px;
          }

          .momey_icon {
            color: #e9284f;
            margin-right: 4px;
          }

          .data_cion {
            color: #e9284f;
            margin-right: 4px;
          }

          ul {
            li {
              font-size: @font14;
              font-family: Microsoft YaHei;
              line-height: 24px;
              font-weight: normal;
              color: @text-color-909;
            }
          }
        }

        .row-footer {
          margin: 17px 0 0;

          .row-footer-text {
            width: 100%;
            font-family: Microsoft YaHei;
            background-color: #f5f7fa;
            border-radius: 4px;
            padding: 24px;
            font-size: @font16;
            font-weight: normal;
            color: #909399;

            p {
              -webkit-line-clamp: 3; // 用来限制在一个块元素显示的文本的行数
              display: -webkit-box; // 将对象作为弹性伸缩盒模型显示
              -webkit-box-orient: vertical; //设置或检查伸缩盒对象的子元素的排列方式
              text-overflow: ellipsis; // 在多行文本的情况下，用...隐藏超出范围的文本
              word-break: break-all;
              overflow: hidden;
            }
          }

          .right-icon {
            width: 18px;
            height: 18px;
            line-height: 24px;
            color: #909399;
          }
        }
      }
    }
  }
}

.dwon {
  color: #ddd;
}
</style>